<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>jWidget—SlideView轮播</title>
<style>
/* reset */
body, div, dl, dt, dd, ul, ol, li{padding:0; margin:0;}
img, button, input{border:0;}
input, label, select, option, textarea, button, legend{font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif;}
table{border-collapse:collapse; border-spacing:0; font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif;}
ul{list-style:none;}
body{background-color:#FFFFFF;font:12px/18px Verdana, Simsun, Helvetica, Arial, sans-serif; color:#333333; text-align:left;}
fieldset{ margin:14px; padding:14px; float:left}
.con{width:590px; float:left}

/* link */
a{color:#686868;}
a:link, a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
.hot{color:#cd0000;}
a.hot:link, a.hot:visited{text-decoration:underline;}
a.hot:hover, a.hot:active{text-decoration:none;}

/*slider1*/
#slidershow{float:left;width:520px;margin-bottom:10px;}
.slider_top{background:url(images/bg_vipshop.png) no-repeat 0 -50px;height:3px;font-size:0;line-height:0;}
.contentslider{border:1px solid #dddddd;border-width:0 1px;padding:0 2px;}
.contentslider .wrapslider{ overflow:hidden; width:514px; height:261px; position:relative;}
.contentslider .opacitylayer{width:100%;height:100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:1;opacity:1;}
.contentslider .slider_ad{display:none;}
.pagination{background:url(images/bg_vipshop.png) no-repeat -220px -380px;width:520px;height:30px; padding-top:5px;}
.pagination li{ float:left}
.pagination a{float:left;width:100px;margin:0 15px;height:25px;overflow:hidden;color:#333;text-align:center;font-size:12px;line-height:25px;display:inline;}
.pagination a:hover{text-decoration:none;}
.pagination li.on a{background:url(images/bg_vipshop.png) no-repeat -640px -320px;color:#fff;text-decoration:none;}

/*slider2*/
#slider2 {width:514px;height:262px;overflow:hidden}
#slider2_panel {position:absolute;height:262px;}
#slider2_panel li {float:left;}
#slider2_panel li img {width:514px;height:262px;}
.slider2_opacity {position:absolute;width:514px;height:70px;top:192px;left:0;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;	opacity: 0.5;}
#slider2_nav {z-index: 99;position:absolute;width:514px;height:70px;top:192px;left:0;padding-bottom: 5px;padding-left:18px;}
#slider2_nav li {float:left;margin:12px 15px;}
#slider2_nav li img {width:86px;height:50px;border:2px solid #888;}
#slider2_nav .on img {border-color:#FF9;}


.slider3, .slider3 * {margin:0;padding:0;}
.slider3 {width:520px;height:160px;overflow:hidden;position:relative}
.slider3_nav {position:absolute;right:5px;bottom:5px;}
.slider3_nav li {float: left;color: #09F;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 2px solid #09F;background-color: #fff;}
.slider3_nav li.on {color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color:#09F;font-weight: bold;}

/*slider4*/
.slider4_con {position:relative;width:520px;height:186px;margin-bottom:10px; overflow:hidden}
.slider4 {width:520px;height:160px;}
.slider4 img {width:520px;height:160px;}
.slider4_nav {height:26px;}
.slider4_nav a {float:left;background:url(images/bg_index.png) no-repeat -220px -70px;width:104px;height:19px;padding-top:7px;text-align:center;line-height:1.231;font-size:12px}
.slider4_nav a.on {background:url(images/bg_index.png) no-repeat -330px -70px;color:#fff;text-decoration:none;}
.slider_line_l {position:absolute;top:160px;background:url(images/bg_index.png) no-repeat -220px -40px;width:2px;height:26px;}
.slider_line_r {position:absolute;right:0;top:160px;background:url(images/bg_index.png) no-repeat -738px -40px;width:2px;height:26px;}

/*slider5*/
#slider5 {width:520px; height:100px;overflow:hidden}
</style>
</head>
<body>
<div>
<h1><center>jWidget—SlideView 轮播  &nbsp;&nbsp;&nbsp;&nbsp;<a href="jwidget-tab.html" style="text-decoration:underline">Tab切换</a></center></h1>

<div class="con">
<fieldset>
    <legend>轮播demo 1</legend>
    <!-- 轮播 开始 -->
    <div id="slidershow">
        <div class="slider_top"></div>
        <div  id="slider1" class="contentslider" >
            <div class="wrapslider">
                <ul id="slide_panel">
                    <li> <a href="http://act.vip.qq.com/2009/vipshop/new1/?shopid=2" target="_blank"><img src="images/1-1.jpg" width="514" height="262" alt="佐丹奴最新入驻" title="佐丹奴最新入驻" /></a> </li>
                    <li> <a href="http://act.vip.qq.com/2009/vipshop/new1/?shopid=3" target="_blank"><img src="images/1-2.jpg" width="514" height="262" alt="ONLY最新入驻" title="ONLY最新入驻" /></a> </li>
                    <li> <a href="http://act.vip.qq.com/2009/vipshop/mall19.html" target="_blank"><img src="images/1-3.jpg" width="514" height="262" alt="第19期周四抢购" title="第19期周四抢购" /></a> </li>
                    <li> <a href="http://act.vip.qq.com/2009/vipshop/new/?shopid=1" target="_blank"><img src="images/1-4.jpg" width="514" height="262" alt="Lee最新入驻" title="Lee最新入驻" /></a> </li>
                </ul>
            </div>
        </div>
        <ul class="pagination"  id="slide_nav">
            <li><a href="http://act.vip.qq.com/2009/vipshop/new1/?shopid=2" target="_blank" >佐丹奴最新入驻</a></li>
            <li><a href="http://act.vip.qq.com/2009/vipshop/new1/?shopid=3" target="_blank" >ONLY最新入驻</a></li>
            <li><a href="http://act.vip.qq.com/2009/vipshop/mall19.html" target="_blank" >第19期周四抢购</a></li>
            <li><a href="http://act.vip.qq.com/2009/vipshop/new/?shopid=1" target="_blank" >Lee最新入驻</a></li>
        </ul>
    </div>
    <!-- 轮播 结束 -->
</fieldset>

<fieldset>
    <legend>轮播demo 2</legend>
    <!-- 图片轮播 开始 -->
    <div id="slider2">
        <ul id="slider2_panel" class="slider2_panel">
            <li><img src="images/2-1.jpg" alt="" /></li>
            <li><img src="images/2-2.jpg" alt="" /></li>
            <li><img src="images/2-3.jpg" alt="" /></li>
            <li><img src="images/2-4.jpg" alt="" /></li>
        </ul>
        <ul id="slider2_nav" class="slider2_nav">
            <li><a href="http://shop.qq.com/" target="_blank" ><img src="images/2-1.jpg" alt="" /></a></li>
            <li><a href="http://shop.qq.com/" target="_blank" ><img src="images/2-2.jpg" alt="" /></a></li>
            <li><a href="http://shop.qq.com/" target="_blank" ><img src="images/2-3.jpg" alt="" /></a></li>
            <li><a href="http://shop.qq.com/" target="_blank" ><img src="images/2-4.jpg" alt="" /></a></li>
        </ul>
        <div class="slider2_opacity"></div>
    </div>
    <!-- 图片轮播 结束 -->
</fieldset>
</div>

<div class="con">
<fieldset>
    <legend>轮播demo 3</legend>
        <!-- 规范的轮播结构 开始 -->
    <div class="slider3" id="slider3">
        <ul>
            <li><IMG src="images/3-1.jpg" width="520" height="160" /></li>
            <li><IMG src="images/3-2.jpg" width="520" height="160" /></li>
            <li><IMG src="images/3-3.jpg" width="520" height="160" /></li>
            <li><IMG src="images/3-4.jpg" width="520" height="160" /></li>
        </ul>
        <ul class="slider3_nav" >
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
	<!-- 规范的轮播结构 结束 -->
</fieldset>

<fieldset>
    <legend>轮播demo 4</legend>
    <!-- 图片轮播 开始 -->
    <div class="slider4_con">
        <div id="slider4" class="slider4">
            <div>
                <div><a href="http://game.vip.qq.com/monopoly/" target="_blank"><img src="images/3-4.jpg" alt="" /></a></div>
                <div><a href="http://act.vip.qq.com/2009/60/index.html" target="_blank"><img src="images/3-3.jpg" alt="" /></a></div>
                <div><a href="http://book.qq.com/viparea/vip.htm" target="_blank"><img src="images/3-1.jpg" alt="" /></a></div>
                <div><a href="http://user.qzone.qq.com/88881111/blog/1253677078" target="_blank"><img src="images/3-2.jpg" alt="" /></a></div>
                <div><a href="http://act.vip.qq.com/2009/vipshop/guoqing/" target="_blank"><img src="images/3-1.jpg" alt="" /></a></div>
            </div>
        </div>
        <div class="slider4_nav" id="slider4_nav"> 
        <a href="#">国庆60年员</a> 
        <a href="#">会员本周</a> 
        <a href="#">QQ产品合作</a> 
        <a href="#">参与年盛典</a> 
        <a href="#">QQ会合作</a> </div>
        <div class="slider_line_l"></div>
        <div class="slider_line_r"></div>
    </div>
    <!-- 图片轮播 结束 -->
</fieldset>

<fieldset>
    <legend>轮播demo 5</legend>
    <!-- 轮播广告 开始 -->
    <div id="slider5" >
        <ul>              
            <li><a target="_blank" href="http://auction1.paipai.com/"><img src="images/4-1.jpg" width="520" height="100" /></a></li>
            <li><a target="_blank" href="http://auction1.paipai.com/"><img src="images/4-2.jpg" width="520" height="100" /></a></li>
            <li><a target="_blank" href="http://auction1.paipai.com/"><img src="images/4-3.jpg" width="520" height="100" /></a></li>
        </ul> 
    </div>
    <!-- 轮播广告 结束 -->
</fieldset>

</div>
<!-- 独立版本 -->
<script src="../build/release/jwidget_1.0.0-min.js"></script>
<script type="text/javascript">
jWidget.ui.SlideView("slider1", {panelWrapper:"slide_panel",navWrapper:"slide_nav"});
jWidget.ui.SlideView("slider2", {effect: 'scrolly'});
jWidget.ui.SlideView("slider3", {effect: 'scrolly fade'});
jWidget.ui.SlideView("slider4", {effect: 'fade', navWrapper : 'slider4_nav'});
jWidget.ui.SlideView("slider5", {effect: 'fade'});	
</script>

<!-- QZFL版本 -->
<!--
<script src="http://imgcache.qq.com/ac/qzone/qzfl/qzfl_2.0.6.1.js"></script>
<script src="../build/release/jwidget_qzfl_1.0.0-min.js"></script>
<script type="text/javascript">
QZFL.ui.SlideView("slider1", {panelWrapper:"slide_panel",navWrapper:"slide_nav"});
QZFL.ui.SlideView("slider2", {effect: 'scrolly'});
QZFL.ui.SlideView("slider3", {effect: 'scrolly fade'});
QZFL.ui.SlideView("slider4", {effect: 'fade', navWrapper : 'slider4_nav'});
QZFL.ui.SlideView("slider5", {effect: 'fade'});	
</script>
-->
</body>
</HTML>
